<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Timeline 时间轴"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="基础用法">
      <hips-timeline style="padding: 10px">
        <hips-timeline-item
          title="1976年"
          content="Apple I 问世"
        />
        <hips-timeline-item
          title="1984年"
          content="发布 Macintosh"
        />
        <hips-timeline-item
          title="2007年"
          content="发布 iPhone"
        />
        <hips-timeline-item
          title="2010年"
          content="发布 iPad"
        />
      </hips-timeline>
    </demo-block>

    <demo-block title="圆圈颜色">
      <hips-timeline style="padding: 10px">
        <hips-timeline-item title="发布1.0版本">
          <p>基本完成</p>
        </hips-timeline-item>
        <hips-timeline-item
          title="发布2.0版本"
          color="orange"
        >
          <p>优化体验</p>
        </hips-timeline-item>
        <hips-timeline-item
          title="发布3.0版本"
          color="red"
        >
          <p>持续优化</p>
        </hips-timeline-item>
        <hips-timeline-item
          title="发布4.0版本"
          color="green"
        >
          <p>优化完成</p>
        </hips-timeline-item>
      </hips-timeline>
    </demo-block>

    <demo-block title="最后一个">
      <hips-timeline
        pending
        style="padding: 10px"
      >
        <hips-timeline-item>
          发布1.0版本
          <p>基本完成</p>
        </hips-timeline-item>
        <hips-timeline-item>
          发布2.0版本
          <p>优化体验</p>
        </hips-timeline-item>
        <hips-timeline-item>
          发布3.0版本
          <p>持续优化</p>
        </hips-timeline-item>
        <hips-timeline-item>
          <span>发布4.0版本</span>
          <p>优化完成</p>
        </hips-timeline-item>
      </hips-timeline>
    </demo-block>

    <demo-block title="自定义节点">
      <hips-timeline style="padding: 10px">
        <hips-timeline-item>
          <hips-icon
            slot="dot"
            name="el-icon-star-off"
          />
          发布1.0版本
          <p>基本完成</p>
        </hips-timeline-item>
        <hips-timeline-item>
          发布2.0版本
          <p>优化体验</p>
        </hips-timeline-item>
        <hips-timeline-item>
          发布3.0版本
          <p>持续优化</p>
        </hips-timeline-item>
        <hips-timeline-item>
          <span>发布4.0版本</span>
          <p>优化完成</p>
        </hips-timeline-item>
      </hips-timeline>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';

import { Timeline, TimelineItem, Icon } from '@hips/vue-ui';

export default {
  components: {
    [Timeline.name]: Timeline,
    [TimelineItem.name]: TimelineItem,
    [Icon.name]: Icon,
  },
  mixins: [ BasicView ],
};
</script>

<style scoped lang="stylus"></style>
